<script>
  export default {
    name: 'store-boss-dialog',
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 操作类型[true-修改 false-添加]
        optType: false,
        // 商店老板表单对象
        bossForm: {
          // 主键
          id: undefined,
          // 商店主键
          storeId: undefined,
          // 名称
          name: undefined,
          // 性别[0-男 1-女]
          gender: 0,
          // 身份证号
          idCard: undefined,
          // 手机号
          mobile: undefined,
          // 序号
          sort: undefined,
          // 审核备注
          auditRemark: undefined
        },
        // 商店老板表单校验规则对象
        bossRules: {
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '性别不能为空', trigger: 'blur' }
          ],
          idCard: [
            { required: true, message: '身份证号不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '序号不能为空', trigger: 'blur' }
          ],
        },
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
      }
    },
    methods: {
      /**
       * 打开弹出框方法
       * @param {boolean} optType 操作类型[true-修改 false-添加]
       * @param {Object}  store   商店对象
       * @param {Object}  boss    商店老板对象
       */
      openDialog(optType, store, boss) {
        // 打开弹出框
        this.visible = true;

        this.title = optType ? "修改商店老板" : "添加商店老板"
        this.optType = optType;

        let bossForm = this.bossForm;
        if (boss) {
          for (let propKey in bossForm) {
            if (boss.hasOwnProperty(propKey)) {
              bossForm[propKey] = boss[propKey];
            }
          }
        }
        bossForm.storeId = store.id;

        // 获取枚举数据
        this.getEnumData(boss);
      },
      /**
       * 获取枚举数据方法
       * @param {Object} boss 商店老板对象
       */
      getEnumData(boss) {
        const bossForm = this.bossForm;
        const params = {
          id: bossForm.id,
          storeId: bossForm.storeId
        }
        this.$axios.$get('/store-boss/enums', { params: params })
          .then(({ data }) => {
            if (!this.optType) {
              bossForm.sort = data.sort;
            }
            const auditStoreDto = data.auditStoreDto;
            if (auditStoreDto && boss.auditStatus === 2) {
              bossForm.auditRemark = auditStoreDto.auditRemark;

              if (auditStoreDto.type === 30) {
                // 添加商店老板
                this.optType = false;
                this.title = '添加商店老板';
              }
            }
          })
          .catch(() => {});
      },
      /**
       * 保存商店老板事件
       */
      saveHandle() {
        this.$refs.bossForm.validate()
          .then(() => {
            // 按钮禁用
            this.buttonLoad = true;

            return this.$axios.$post('/store-boss/save', this.bossForm)
          })
          .then(() => {
            this.notify('success', '操作成功', '添加商户老板成功，请等待审核');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      },
      /**
       * 修改商店老板事件
       */
      updateHandle() {
        this.$refs.bossForm.validate()
          .then(() => {
            // 按钮禁用
            this.buttonLoad = true;

            return this.$axios.$post('/store-boss/update', this.bossForm)
          })
          .then(() => {
            this.notify('success', '操作成功', '修改商户老板成功，请等待审核');

            this.closeDialog(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可用
            this.buttonLoad = false;
          });
      },
      /**
       * 关闭弹出框方法
       * @param {boolean | function} refresh 是否刷新父级组件数据
       */
      closeDialog(refresh) {
        // 重置表单
        this.$refs.bossForm.resetFields();
        this.bossForm.id = undefined;
        this.bossForm.storeId = undefined;
        console.log('bossForm', JSON.stringify(this.bossForm))

        if (typeof refresh === 'function') {
          refresh = false;
        }
        if (refresh) {
          // 向上传递事件
          this.$emit('refresh');
        }
        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      },
      /**
       * 审核备注分割方法
       * @param auditRemark 审核备注
       * @return {string[]} 审核备注数组
       */
      auditRemarkSplit(auditRemark) {
        if (!auditRemark) {
          return [];
        }
        return auditRemark.split("\n");
      }
    }
  }
</script>

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="43%"
    top="10vh"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    class="store-boss-dialog"
  >
    <el-form :model="bossForm" :rules="bossRules" status-icon label-width="100px" ref="bossForm">
      <el-form-item v-if="bossForm.auditRemark" label="审核回复">
        <div class="auditRemark">
          <div v-for="(remark, index) in auditRemarkSplit(bossForm.auditRemark)" :key="'auditRemark' + index">
            {{ remark }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="老板姓名" prop="name">
        <el-input v-model="bossForm.name" clearable maxlength="30" show-word-limit placeholder="请输入老板姓名"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="老板性别" prop="gender">
        <el-radio-group v-model="bossForm.gender">
          <el-radio :label="0" border>男</el-radio>
          <el-radio :label="1" border>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="bossForm.idCard" clearable maxlength="18" show-word-limit placeholder="请输入老板身份证号"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="bossForm.mobile" clearable maxlength="11" show-word-limit placeholder="请输入老板手机号"
                  class="width90percent">
        </el-input>
      </el-form-item>
      <el-form-item label="序号" prop="sort">
        <el-input v-model="bossForm.sort"
                  clearable
                  maxlength="3"
                  show-word-limit
                  placeholder="请输入序号"
                  class="width90percent">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog(false)">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateHandle">修 改</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>
  .store-boss-dialog >>> .el-dialog__body {
    padding: 20px;
  }
  .store-boss-dialog .width90percent {
    width: 90%;
  }
  .store-boss-dialog .auditRemark {
    max-height: 100px;
    color: #f81313;
    overflow: auto;
  }
</style>
